<template>
  <main class="wss-container">
    <div class="label-box-content">
      <el-row :gutter="20" type="flex">
        <el-col :span="10">
          <NewCard title="关于发票" isright="isright">
            <template slot="right">
              <div class="search">
                <el-input
                  size="mini"
                  placeholder="搜索订单"
                  v-model="searchValue"
                  @change="searchinput(searchValue)"
                  @keyup.enter.native="searchinput(searchValue)"
                >
                  <i class="el-icon-search el-input__icon" slot="suffix"> </i>
                </el-input>
              </div>
            </template>
            <div class="tabOne">
              <!-- 新增发票抬头 -->
              <div
                class="tablist"
                @click="invoiceTitle"
                :class="payStatus == 0 ? 'isActive' : ''"
              >
                <img src="~@/assets/images/fptt-no.png" class="imgnor" />
                <img src="~@/assets/images/fptt.png" class="imgsel" />
                <el-button round>发票抬头</el-button>
              </div>
              <div
                class="tablist"
                @click="waitpay"
                :class="payStatus == 1 ? 'isActive' : ''"
              >
                <img
                  src="~@/assets/images/wkp_icon_nor(1).png"
                  class="imgnor"
                />
                <img src="~@/assets/images/wkp_icon_sel.png" class="imgsel" />
                <el-button round>未开票</el-button>
              </div>
              <div
                class="tablist"
                @click="Completed"
                :class="payStatus == 2 ? 'isActive' : ''"
              >
                <img src="~@/assets/images/ykp_icon_nor.png" class="imgnor" />
                <img src="~@/assets/images/ykp_icon_sel.png" class="imgsel" />
                <el-button round>已开票</el-button>
              </div>
            </div>
            <!-- 发票抬头 -->
            <div class="title-box" v-if="payStatus == 0">
              <div class="content">
                <!-- 发票抬头组件 -->
                <InvoiceTitle></InvoiceTitle>
              </div>
              <!-- <el-empty v-else description="暂无数据"></el-empty> -->
              <!-- 添加新邮箱按钮 -->
              <AddTitle></AddTitle>
            </div>

            <div class="notInvoiced" v-if="payStatus == 1">
              <ul v-if="notInvoicedList.length">
                <li v-for="(inv, index) in notInvoicedList" :key="index">
                  <div>
                    <el-checkbox v-model="inv.isTrue"></el-checkbox>
                  </div>

                  <div class="invInfo">
                    <h3 v-if="inv.type == '1'">
                      <!-- {{ selectstatus(inv.type) }} -->
                      <p>{{ inv.remark }}</p>
                      <span> 未开票 </span>
                    </h3>

                    <h3 v-else-if="inv.type == '2'">
                      <p>问金充值</p>
                      <span> 未开票 </span>
                    </h3>
                    <h3 v-else-if="inv.type == '3'">
                      <p>银行转账</p>
                      <span> 未开票 </span>
                    </h3>

                    <p>服务费用：¥{{ inv.amount && inv.amount.toFixed(2) }}</p>
                    <p>所属圈子：{{ inv.circleName }}</p>

                    <!-- <p>创建时间：{{ inv.createdTime }}</p> -->
                  </div>
                  <!-- <span class="status"> 未开票 </span> -->
                </li>
              </ul>
              <el-empty v-else description="暂无数据"></el-empty>

              <div class="notInvBtn">
                <div class="checkALL">
                  <!-- <el-checkbox
                    v-model="invCheckAll"
                    @change="handleCheckAllChange"
                    >全选</el-checkbox
                  > -->
                  <el-checkbox v-model="invCheckAll">全选</el-checkbox>
                  <p>
                    |&nbsp;&nbsp;&nbsp;共{{ getLength }}个订单，{{
                      getAllMoney
                    }}元
                  </p>
                </div>
                <el-button round @click="submitorder">申请开票</el-button>
              </div>
            </div>
            <div class="makeInvoice" v-if="payStatus == 2">
              <ul v-if="InvoicedList.length">
                <li
                  v-for="inv in InvoicedList"
                  :key="inv.id"
                  @click="rowclick(inv)"
                  :class="invoicedinfoList.id == inv.id ? 'isActive' : ''"
                >
                  <div class="invInfo">
                    <h3>
                      服务费用 {{ inv.amount && inv.amount.toFixed(2) }}元
                      <!-- <span>{{ invoicestatus(inv.status) }}</span> -->
                      <span class="status"> {{ getState(inv.status) }} </span>
                    </h3>
                    <!-- <p></p> -->
                    <p>{{ inv.createdTime }}</p>
                  </div>
                </li>
              </ul>
              <el-empty v-else description="暂无数据"></el-empty>
            </div>
          </NewCard>
        </el-col>
        <el-col :span="14">
          <div class="featuredContent" v-if="demandShow == 0">
            <FeaturedContent></FeaturedContent>
          </div>

          <div class="applyFor" v-show="demandShow == 1">
            <ApplyFor
              @chanceStatus="chanceStatus = 0"
              :getAllMoney="getAllMoney"
            ></ApplyFor>
          </div>
          <div class="detailsInvoice" v-if="demandShow == 2">
            <DetailsInvoice
              @updateDate="getuninvoicelistfn"
              :invoicedinfoList="invoicedinfoList"
            ></DetailsInvoice>
          </div>
        </el-col>
      </el-row>
    </div>
  </main>
</template>

<script>
import ApplyFor from "./applyFor.vue";
import DetailsInvoice from "./detailsInvoice.vue";
import NewCard from "@/wss/components/newCard.vue";
import FeaturedContent from "../../../../components/FeaturedContent/index.vue";
import InvoiceTitle from "./invoiceTitle";
import AddTitle from "./addTitle.vue";
import {
  getuninvoicelist,
  getinvoicegetInfolist,
  getinvoicelist
} from "../../../../BMViews/api/aboutInvoice/aboutInvoice.js";

export default {
  name: "AboutInvoice",
  components: {
    NewCard,
    ApplyFor,
    DetailsInvoice,
    FeaturedContent,
    InvoiceTitle,
    AddTitle
  },
  data() {
    return {
      checkList: [],
      pageing: { pageNum: 1, pageSize: 100 },
      isright: true, //显示搜索框
      notInvoicedShow: true, // 选择的是已开票还是未开票
      searchValue: "", //搜索框输入的值
      invChecked: [], //未开票选择的项id
      invCheckedmenoy: [], //未开票选择的金钱
      // invCheckAll: false, //未开票的全选
      payStatus: 0,
      demandShow: 0, //默认推荐页
      //未开票的数据
      notInvoicedList: [],
      newnotInvoicedList: [],
      //已开票的数据
      InvoicedList: [],
      selectArr: [],
      //对应ID发票数据集合
      invoicedinfoList: {},
      getLength: 0,
      getAllMoney: 0,
      selectArr: []
    };
  },
  created() {
    this.getuninvoicelistfn();

    this.$bus.$on("refreshData", () => {
      this.getuninvoicelistfn(); //刷新数据
    });
  },
  beforeDestroy(){
    // 销毁
    this.$bus.$off('refreshData') 
  },
  computed: {
    getRemarik() {
      return () => {};
    },
    getTrue() {
      return val => {
        return val;
      };
    },
    invCheckAll: {
      get() {
        // 未开票列表等于0直接退出
        if (this.notInvoicedList.length <= 0) return false;

        // 过滤已选订单数组
        let selectArr = this.notInvoicedList.filter(item => item.isTrue);
        console.log(selectArr, "selectArrselectArr");
        this.selectArr = selectArr;

        // 获取已选订单
        this.getLength = selectArr.length;
        // 获取总价格
        this.getAllMoney = selectArr.reduce(
          (prev, next) => (prev += next.amount),
          0
        );
        this.selectArr = selectArr;
        // 是否全选
        return this.notInvoicedList.every(item => item.isTrue == true);
      },
      set(val) {
        console.log(val, "valvalvalva");
        return this.notInvoicedList.forEach(item => (item.isTrue = val));
      }
    },

    //总价
    totalPrice() {
      console.log(this.invCheckedmenoy);
      return this.invCheckedmenoy.reduce(
        (prev, cur) => (prev += cur.amount),
        0
      );
    }
  },
  methods: {
    // 获取开票状态
    getState(status) {
      const stateMap = {
        1: "开票中",
        2: "已开票",
        3: "已邮寄"
      };
      return stateMap[status];
    },

    //获取未開票列表
    async getuninvoicelistfn() {
      const { pageNum, pageSize } = this.pageing;
      const status = 2;
      const userType = 1;
      let { rows, code } = await getuninvoicelist({
        pageNum,
        pageSize,
        //标识未开票的字段
        opened: "1",
        status,
        userType
      });
      if (code == 200) {
        rows.forEach(item => (item.isTrue = false));

        this.notInvoicedList = JSON.parse(JSON.stringify(rows));
        console.log(this.notInvoicedList, "---------已经开票");
        this.notInvoicedList.forEach(item => {
          if (item.remark) {
            item.remark = item?.remark.slice(
              item?.remark.indexOf("：") + 1,
              item?.remark.lastIndexOf("；")
            );
          }
        });

        this.newnotInvoicedList = JSON.parse(JSON.stringify(rows));
      }
    },
    //获取已開票列表
    async getinvoicelistfn() {
      const { pageNum, pageSize } = this.pageing;
      //路由参数（默认选中哪一项）
      let defaultId = this.$route;
      const userType = 1;
      let { rows, code } = await getinvoicelist({
        pageNum,
        pageSize,
        userType
      });
      if (code == 200) {
        //过滤掉发票status=1未开票的数据
        // this.InvoicedList = rows.filter((item) => (item = item.status != 1));
        this.InvoicedList = rows;
      }
    },
    async getinvoicegetInfolistfn(id) {
      let { data, code } = await getinvoicegetInfolist({ id });
      if (code == 200) {
        // this.notInvoicedList=rows
        this.invoicedinfoList = data;
      }
    },
    //搜索
    async searchinput(value) {
      const arr = ["", null, undefined];
      if (arr.includes(value)) {
        this.notInvoicedList = this.newnotInvoicedList;
        return;
      }
      let tableList = this.notInvoicedList;
      let newArr = this.newnotInvoicedList;
      tableList = newArr.filter(item => {
        console.log(item.remark, "item.nickname");
        return item.remark && item.remark.includes(value);
      });
      this.notInvoicedList = tableList;
    },
    invoiceTitle() {
      this.payStatus = 0;
    },
    waitpay() {
      this.payStatus = 1;
      console.log("123");
      this.getuninvoicelistfn();
    },
    Completed() {
      this.payStatus = 2;
      this.getinvoicelistfn();
    },
    rowclick(row) {
      console.log(row, "123");
      this.demandShow = 2;
      this.getinvoicegetInfolistfn(row.id);
    },
    //多选，取消和添加
    clicktap(item, index) {
      console.log(item);
      return;
      this.$set(item, "isTrue", !item.isTrue);

      console.log(item, "item");
      this.$set(this.notInvoicedList, index, item);

      // if (!this.invChecked.includes(e.id)) {
      //   this.invChecked.push(e.id);
      //   this.invCheckedmenoy.push(e);
      // } else {
      //   this.invChecked = this.invChecked.filter((item) => item != e.id);
      //   this.invCheckedmenoy = this.invCheckedmenoy.filter(
      //     (item) => item.id != e.id
      //   );
      // }
    },

    // 全选效果
    // handleCheckAllChange() {
    //   const { invCheckAll } = this;
    //   this.invCheckedmenoy = [];
    //   console.log(invCheckAll);
    //   if (invCheckAll == true) {
    //     this.notInvoicedList.forEach((item) => {
    //       this.$set(item, "isTrue", true);
    //       // item.isTrue = true;
    //       this.invChecked.push(item.id);
    //     });
    //     this.invCheckedmenoy = this.notInvoicedList;
    //   } else {
    //     this.invChecked = [];
    //     this.invCheckedmenoy = [];
    //   }
    // },
    //订单提交
    submitorder() {
      let s = new Set();
      this.selectArr.forEach(item => s.add(item.circleId));
      if (s.size > 1) {
        this.$message({
          type: "warning",
          message: "只能开同一个圈子的发票"
        });
        return;
      }

      if (this.getLength > 0) {
        this.demandShow = 1;
        // 过滤出id
        let idArr = this.selectArr.map(item => item.id);
        this.$bus.$emit("invChecked", idArr);
        // } else {
        //   this.$message({
        //     showClose: true,
        //     message: "请选择发票",
        //     type: "error",
        //   });
      }
    },
    //状态的展示
    selectstatus(value) {
      const stateMap = {
        1: "未开票",
        2: "已开票"
      };
      console.log(stateMap[value], "切图切图切图");
      return stateMap[value];
    },
    //状态的展示
    invoicestatus(value) {
      const stateMap = {
        1: "开票中",
        2: "已开票",
        3: "已邮寄"
      };
      return stateMap[value];
    }
  }
};
</script>

<style scoped>
/* 高度 */
::v-deep .label-box-content,
::v-deep .label-box-content .el-row,
::v-deep .label-box-content .el-col,
::v-deep .label-box-content .el-col > div,
::v-deep .label-box-content .el-card,
::v-deep .label-box-content .el-card__body {
  height: 100%;
}
::v-deep .label-box-content .el-card__body {
  position: relative;
  padding: 0 0 30px 0;
}
::v-deep .label-box-content .el-card__body .top {
  margin-left: 30px;
  margin-right: 30px;
}
::v-deep .label-box-content .el-card__body > div {
  height: 92%;
  overflow-y: auto;
}
::v-deep .label-box-content .el-card__body > div::-webkit-scrollbar {
  width: 0px;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* 搜索 */
::v-deep .search .el-input__inner {
  border-radius: 18px;
}
.search .el-button {
  border: 0;
  margin-top: 4px;
  padding: 6px;
  font-size: 16px;
}
/* 一级 */
.tabOne {
  display: flex;
  justify-content: space-evenly;
  border: 1px solid #e5e6e9;
  background-color: #f9f9f9;
  border-radius: 12px;
  padding: 26px 0;
  margin: 0 30px;
  margin-top: 15px;
}
.tabOne .tablist {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.tabOne .tablist img {
  width: 36px;
}

.tabOne .tablist img.imgsel {
  display: none;
}
.tabOne .tablist.isActive img.imgsel {
  display: block;
}
.tabOne .tablist.isActive img.imgnor {
  display: none;
}

.tabOne .tablist button {
  color: #686975;
  font-size: 16px;
  background-color: transparent;
  border: 2px solid #c8cce2;
  padding: 6px 20px;
  margin-top: 18px;
}
.tabOne .tablist::before {
  content: "";
  display: none;
  position: absolute;
  bottom: -26px;
  width: 0;
  height: 0;
  border-bottom: 12px solid #e5e6e9;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}
.tabOne .tablist::after {
  content: "";
  display: none;
  position: absolute;
  bottom: -27px;
  width: 0;
  height: 0;
  border-bottom: 12px solid #fff;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}

.tabOne .tablist.isActive button,
.tabOne .tablist button:hover {
  color: #fff;
  background-color: #6a769f;
  border-color: #6a769f;
}
.tabOne .tablist.isActive::before {
  display: block;
}
.tabOne .tablist.isActive::after {
  display: block;
}

/* 未开票样式 */
.notInvoiced {
  padding: 30px 30px 0;
}
.notInvoiced ul {
  margin-bottom: 40px;
}
.notInvoiced .el-checkbox {
  margin-right: 10px;
}
::v-deep .notInvoiced .el-checkbox__label {
  display: none;
}

::v-deep .notInvoiced .el-checkbox .el-checkbox__inner {
  width: 18px;
  height: 18px;
  border-color: #bbbbbb;
  background: #fff;
  border-radius: 50%;
}
::v-deep .notInvoiced .el-checkbox .is-disabled .el-checkbox__inner {
  background: #f2f2f2;
}
::v-deep .notInvoiced .el-checkbox .is-checked .el-checkbox__inner {
  border-color: #f87a23;
  background: #f87a23;
}
::v-deep .notInvoiced .el-checkbox__input .el-checkbox__inner::after {
  content: "";
  width: 10px;
  height: 5px;
  border: 3px solid white;
  border-top: transparent;
  border-right: transparent;
  text-align: center;
  display: block;
  position: absolute;
  top: 6px;
  left: 5px;
  vertical-align: middle;
  transform: rotate(0deg) scaleY(0);
  border-radius: 0px;
  background: none;
}
::v-deep
  .notInvoiced
  .el-checkbox__input.is-checked
  .el-checkbox__inner::after {
  transform: rotate(-45deg) scaleY(1);
}
.notInvoiced .invInfo {
  flex-grow: 1;
  border-bottom: 1px solid #efefef;
  margin-bottom: 20px;
  padding-bottom: 20px;
}

.notInvoiced li {
  display: flex;
}
/* .notInvoiced ul > li:hover {
  background-color: #f4f5f8;
} */

.notInvoiced li h3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0;
  margin-bottom: 10px;
  margin-top: 3px;
}
.notInvoiced li h3 > p {
  width: calc(100% - 36px);
  font-size: 16px;
  font-weight: bold;
  color: #333;
}
.notInvoiced li h3 > span {
  display: block;
  width: 36px;
  margin-top: 3px;
  font-weight: 400;
  font-size: 12px;
  color: #999;
}
.notInvoiced li p {
  margin: 0;
  font-size: 12px;
  color: #999;
  line-height: 20px;
}
/* 未开票底部提交 */
.notInvBtn {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  border-top: 1px solid #ecedf0;
  padding: 10px 30px;
  display: flex;
  justify-content: space-between;
  z-index: 9;
}
.notInvoiced .checkALL {
  display: flex;
  align-items: center;
  font-size: 12px;
}
::v-deep .notInvoiced .checkALL .el-checkbox__label {
  display: inline-block;
  font-size: 12px;
}
::v-deep .notInvoiced .checkALL .is-checked .el-checkbox__label {
  color: #f87a23;
}
.notInvoiced .checkALL p {
  margin: 0;
  margin-top: -3px;
}
.notInvBtn .el-button {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  padding: 10px 50px;
}
.notInvBtn .el-button:hover {
  opacity: 0.9;
}

/* ******************已开票******************* */
.makeInvoice {
  padding-top: 10px;
}
.makeInvoice li {
  padding: 20px 30px 0;
}
.makeInvoice li:hover,
.makeInvoice li.isActive {
  background-color: #f4f5f8;
}
.makeInvoice li h3 {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: bold;
}
.makeInvoice li h3 > span {
  font-size: 12px;
  font-weight: 400;
  color: #999;
}
.makeInvoice li p {
  font-size: 12px;
  font-weight: 400;
  color: #999;
  margin: 0;
  margin-top: 10px;
  padding-bottom: 20px;
}
/* 組件樣式衝突 */
>>> .featuredContent .el-card__body {
  padding: 0 30px;
}
>>> .featuredContent .el-card__body > .top {
  margin: 0;
}
.status {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
}
/* 发票抬头 */
.content {
  padding: 0 30px;
}
</style>
